import React, { Component } from "react";

import {
  StyleSheet, Text, View, TouchableOpacity,
} from "react-native";
import PropTypes from "prop-types";
import {
  Color, FontSize, ScreenWidth, scale,
} from "../../common/index";
import { isEmpty } from "../../utils/utils";

export default class TagGroup extends Component {
  constructor(props) {
    super(props);
    const { defaultActiveIndex } = props;
    this.state = {
      activeIndex: defaultActiveIndex,
    };
  }

  handleItemClick(item, index) {
    const { onChange, valueName, data } = this.props;
    this.setState({
      activeIndex: index,
    });
    onChange(valueName === "item" ? data[index] : valueName === "index" ? index : data[index][valueName]);
  }

  getValue() {
    const { valueName, data } = this.props;
    const { activeIndex } = this.state;
    return valueName === "item"
      ? data[activeIndex]
      : valueName === "index"
        ? activeIndex
        : data[activeIndex][valueName];
  }

  render() {
    const {
      keyName,
      activeTextStyle,
      defaultTextStyle,
      width,
      data,
      title,
      activeStyle,
      defaultStyle,
      columnNum,
      desc,
      style = {},
      selectType,
    } = this.props;
    const itemWidth = (ScreenWidth - scale * 16 * (columnNum + 1)) / columnNum;
    const { activeIndex } = this.state;
    return (
      <View style={style}>
        {!isEmpty(title) && (
          <View style={styles.titleConatiner}>
            <Text style={styles.textTitle}>{title}</Text>
            {!isEmpty(desc) && <Text style={styles.textDesc}>{desc}</Text>}
          </View>
        )}
        <View style={[styles.container, { width }]}>
          {data.map((item, index) => (
            <TouchableOpacity
              key={String(index)}
              activeOpacity={0.8}
              style={[styles.itemContainer, activeIndex === index ? activeStyle : defaultStyle, { width: itemWidth }]}
              onPress={() => this.handleItemClick(item, index)}
            >
              <Text style={activeIndex === index ? activeTextStyle : defaultTextStyle}>{item[keyName]}</Text>
            </TouchableOpacity>
          ))}
        </View>
      </View>
    );
  }
}

TagGroup.propTypes = {
  width: PropTypes.number,
  data: PropTypes.array,
  title: PropTypes.string,
  desc: PropTypes.string,
  activeStyle: PropTypes.any,
  defaultStyle: PropTypes.any,
  activeTextStyle: PropTypes.any,
  defaultTextStyle: PropTypes.any,
  defaultActiveIndex: PropTypes.number,
  columnNum: PropTypes.number,
  selectType: PropTypes.number,
  keyName: PropTypes.string.isRequired,
  valueName: PropTypes.string,
  onChange: PropTypes.func,
};
TagGroup.defaultProps = {
  data: [],
  title: "",
  desc: "",
  valueName: "item",
  width: ScreenWidth,
  selectType: 0,
  activeStyle: {
    backgroundColor: Color.bg_tag_active,
    paddingVertical: scale * 5,
    borderRadius: scale * 5,
    borderWidth: 1,
    borderColor: Color.border_tag_active,
  },
  defaultStyle: {
    backgroundColor: Color.bg_tag_default,
    paddingVertical: scale * 5,
    borderRadius: scale * 5,
    borderWidth: 1,
    borderColor: Color.bg_tag_default,
  },
  activeTextStyle: {
    color: Color.border_tag_active,
    fontSize: FontSize.SIZE_14,
  },
  defaultTextStyle: {
    color: Color.text_content,
    fontSize: FontSize.SIZE_14,
  },
  defaultActiveIndex: 0,
  columnNum: 2,
  onChange: () => {},
};

const styles = StyleSheet.create({
  container: {
    flexWrap: "wrap",
    flexDirection: "row",
    justifyContent: "space-between",
    paddingHorizontal: scale * 16,
  },
  itemContainer: {
    marginTop: scale * 16,
    justifyContent: "center",
    alignItems: "center",
  },
  titleConatiner: {
    flexDirection: "row",
    alignItems: "flex-end",
    marginTop: scale * 24,
    paddingHorizontal: scale * 16,
  },
  textTitle: {
    fontSize: FontSize.SIZE_14,
    color: Color.text_title,
    fontWeight: "bold",
  },
  textDesc: {
    fontSize: FontSize.SIZE_12,
    color: Color.text_assist,
    marginLeft: scale * 8,
  },
});
